*{
  margin: 0;
  padding: 0;
}

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; 
  align-items: center;
  background-color: gray;

}

@mixin semi-circle(){

}

@keyframes rotate{
  0%{transform: rotate(0);filter: blur(0);}
  50%{transform: rotate(360deg);filter: blur(2px);}
  100%{transform: rotate(720deg);filter: blur(0);}
}
@keyframes blink_white{
  0%{box-shadow: 0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff;}
  50%{box-shadow: none;}
  100%{box-shadow: 0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff;}
}
@keyframes blink_black{
  0%{box-shadow: 0 0 5px #000,
    0 0 10px #000,
    0 0 20px #000,
    0 0 30px #000;}
  50%{box-shadow: none;}
  100%{box-shadow: 0 0 5px #000,
    0 0 10px #000,
    0 0 20px #000,
    0 0 30px #000;}
}

.container{
  width: 30vw;
  height: 30vw;
  position: relative;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
  animation: rotate 10s linear infinite;

  .black{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip-path:polygon(0 0,50% 0,50% 100%,0 100%) ;
    background-color: #000;
  }
  .black-oth{
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    clip-path:polygon(49% 0,100% 0,100% 100%,49% 100%) ;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    
  }
  .white-lit{
    position: absolute;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 5px #fff,
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff;
    z-index: 15;
    animation: blink_white 15s linear infinite;
  }
  .white{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip-path:polygon(50% 0,50% 100%,100% 100%,100% 0) ;
    background-color: white;
    z-index: 5;
  }
  .white-oth{
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background-color: #fff;
    clip-path:polygon(0 0,51% 0,51% 100%,0 100%) ;
    z-index: 10;
  }
  .black-lit{
    position: absolute;
    width: 25%;
    height: 25%;
    left: 50%;
    bottom: 25%;
    transform: translate(-50%,50%);
    border-radius: 50%;
    background-color: #000;
    box-shadow: 0 0 5px #000,
                0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
    z-index: 15;
    animation: blink_black 15s linear infinite;

  }
}